<template>
  <div class="box4" ref="map"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import chinaJson from "./china.json";
const map = ref();
echarts.registerMap("china", chinaJson as any);
onMounted(() => {
  let aa = echarts.init(map.value);
  console.log(map.value);
  aa.setOption({
    geo: {
      map: "china",
      roam: true,
      left: 150,
      top: 150,
      label: {
        show: true,
        color: "#ffffff",
      },
      emphasis:{
        label:{
            fontSize:30
        }
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "skyblue", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "blue", // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
    },
    series: [
      {
        type: "lines",
        effect:{
            show:true,
            symbolSize:20,
            color:'bule',
            symbol:'M 195.061 842.569 a 13.4783 13.4783 0 0 1 -10.1087 -4.11837 a 14.6015 14.6015 0 0 1 0 -19.843 l 112.319 -112.319 a 13.8527 13.8527 0 0 1 19.843 19.843 l -112.319 112.319 a 12.7295 12.7295 0 0 1 -9.73433 4.11837 Z'
        },
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
              // 如果 polyline 为 true 还可以设置更多的点
            ],
            // 统一的样式设置
            lineStyle: {
                color:'#ffffff',
                opacity:1,
                width:3,
                type:'dashed'
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [ 102.712251,
                    25.040609], // 终点
              // 如果 polyline 为 true 还可以设置更多的点
            ],
            // 统一的样式设置
            lineStyle: {
                color:'#ffffff',
                opacity:1,
                width:3,
                type:'dashed'
            },
          },
        ],
      },
    ],
  });
});
</script>
<style scoped lang="scss">
.box4 {
  width: 900px;
  height: 900px;
}
</style>